<template>
    <div class="bigBox">
        <div v-show="show1" style="width:800px">
            <p style="text-align:center;color:white;font-size:30px;padding-bottom:7px;">草稿箱</p>
            <table border="1" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <td>标题</td>
                        <td>标签</td>
                        <td>日期</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in myDraft" :key="index">
                        <td @click="goto1(index)">{{item.title}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.date}}</td>
                        <td><a @click="editDraft(index)">编辑</a>|<a @click="deleteDraft(index)">删除</a></td>
                    </tr>
                </tbody>
            </table>
            <button @click="addDraft">添加草稿</button> 
        </div>
        <div class="contentDes" v-for="(item,index) in myDraft" v-show="item.hide1" :key="index">
            <button @click="back1(index)">返回</button>
            <h3 style="text-align:center">{{item.title}}</h3>
            <a>{{item.draftContent}}</a>
            
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            myDraft:[],
            mydate:'',
            show1:true
        }
    },
    mounted:function(){
        this.getdata()
        var date=new Date();
        //this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours();
        this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

    },
    methods:{
        getdata(){
            this.$axios.get('/api/myBlog/draftBox',{
                params:{
                    _id:this.$route.query._id,
                    title:this.$route.query.title,
                    description:this.$route.query.description,
                    username:sessionStorage.getItem("username"),
                    hide1:false,
                    draftContent:this.$route.query.draftContent
                }
            }).then(res=>{
                this.myDraft=res.data;
                //console.log(this.myDraft)
            })
        },
        editDraft(index){
            this.$router.push({path:"/myBlog/editDraft",query:{
                aa:this.myDraft[index]._id
            }})
        },
        deleteDraft(index){
            // this.$router.push({path:"/myBlog/delete",query:{
            //     aa:this.myArtical(index)._id
            // }})
            this.$axios.get('/api/myBlog/deleteDraft',{
                params:{
                    _id:this.myDraft[index]._id,
                    username:sessionStorage.getItem("username")
                }
            }).then(res=>{
                if(res.data!=""){
                    this.myDraft=res.data
                    
                }else{
                    alert("删除失败")
                }
            })
        },
        addDraft(){
            this.$router.push('/myBlog/addDraft')
        },
        goto1(index){
            this.show1=false;
            this.myDraft[index].hide1=true;
        },
        back1(index){
            this.show1=true;
            this.myDraft[index].hide1=false;
        }
        
    }
}
</script>
<style scoped>
.bigBox{

    display: flex;
    justify-content: center;
    align-items: center;
}
table{
    color:white;
    width:800px;
    text-align: center;
    margin-top: 30px;
}
.bigBox button{
    width: 300px;
    height: 50px;
    border:none;
    display: block;
    margin: 0 auto;
    background-color: #97b5b5;
    margin-top:50px;
    color:white;

}
.contentDes{
    border: 1px solid bisque;
    color:white;
    /*text-align: center;
    font-size: 20px; */
    width:700px;
    height: 450px;
    padding: 10px;
}
.contentDes button{
    width:60px;
    height: 30px;
    display: inline-block;
    margin: 0;
    background-color: transparent;
    border:1px solid white;
    border-radius: 5px;
}
thead tr{
    height: 40px;
    background-color: #5f7c92;
}
tbody tr{
    height: 35px;
    background-color: #939ca0;
}
</style>